    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>增删条目</title>
        <script src="jquery.js"></script>
<<<<<<< HEAD
        <style type="text/css">
=======
        <style>
>>>>>>> d039c0432e24598336d4dd637b563cca28130084
           .button span{
                display: block;
                background-color: #e1e1e1;
                font-size: 20px;
                font-weight: bold;
                border: 1px solid #000000;
                width: 120px;
                text-align: center;
            }
            .box{
                width: 420px;
                margin: 100px auto 0;
<<<<<<< HEAD
                /*position: relative;*/
=======
>>>>>>> d039c0432e24598336d4dd637b563cca28130084
            }
            table{
                border-collapse: collapse;//重点在这里
            }
           tbody tr{
                cursor: pointer;
            }
            table tr,td{
                border: 1px solid #0d3349;
                /*border-collapse: collapse;*/
                /*border-spacing: 0;*/
                text-align: center;
                font-size: 16px;
                padding: 5px 10px;
            }
            table th{
                border: 1px solid #0d3349;
                /*border-collapse: collapse;*/
                /*border-spacing: 0;*/
                width: 200px;
                height: 32px;
                font-size: 20px;
                line-height: 32px;
                color: #fff;
                background-color: #0099cc;
            }
            table a{
                text-decoration: none;
                color: #2c00ee;
            }
            .mask{
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                opacity: 0.5;
                background:#000000 ;
                display: none;
            }
<<<<<<< HEAD

=======
            .addPanel{
                /*width: 400px;*/
                /*height: 350px;*/
                border: 1px solid #f7f7f7;
            }
>>>>>>> d039c0432e24598336d4dd637b563cca28130084
            .addPanel span{
                text-align: left;
                padding-left: 10px;
            }
           .header{
               position: relative;
<<<<<<< HEAD
               background-color: #f7f7f7;
=======
               background: #f7f7f7;
>>>>>>> d039c0432e24598336d4dd637b563cca28130084
               font-size: 20px;
               margin-bottom: 10px;
               overflow: hidden;
           }
           .header .head2{
               position: absolute;
               right: 10px;
               top: 2px;
            }
<<<<<<< HEAD

=======
>>>>>>> d039c0432e24598336d4dd637b563cca28130084
            .content-name{
                height: 100%;
                /*position: absolute;*/
                padding-left: 20px;
                padding-right: 20px;
<<<<<<< HEAD
                /*display: inline-block;*/
            }
           .content-depart{
               height: 100%;
               /*position: absolute;*/
               padding-left: 20px;
               padding-right: 20px;
               /*float: left;*/
               /*display: inline-block;*/
            }
           .content-depart input,.content-name input{
               width: 300px;
               height: 34px;
               /*float: left;*/
               margin: 20px 0;
           }
           .content-depart label,.content-name label{
               /*float: left;*/
           }
            .button1{
                margin:25px auto;
                text-align: center;
            }
           .button1 button{
               height: 34px;
               width: 80px;
               font-size: 18px;
           }
            /*.mainContent{*/
                /*background-color: #fff;*/
            /*}*/
            .addPanel{
                background: #fff;
                position: fixed;
                top: 30%;
                left: 39%;
                display: none;
            }
            .mainContent{
                /*display: inline-block;*/
            }
            tr:hover{
                background: rgba(185, 219, 231, 0.45);
            }
        </style>
        <script>
            $(function () {
                //第一个需求：点击添加数据按钮弹出mask背景与添加详细信息面板
                $('.button').click(function () {
                    $('.addPanel').show();
                    $('.mask').show();
                });
                //第二个需求：点击X按钮弹出mask背景与详细信息面板隐藏
                $('.head2').click(function () {
                    $('.addPanel').hide();
                    $('.mask').hide();
                });
                //第三个需求：点击删除按钮删除该项
                $('a').click(function () {
                    $(this).parent().parent().remove();
                    alert("确认删除该选项吗？");
                });
                $('.button1').click(function () {
                    if(($("#textLesson").val())===""||($("#textLesson1").val())===""){
                        alert("请填写完整");
                        return;
                    };
                    var tr=$("<tr></tr>");
                    tr.html("<td>"+$("#textLesson").val()+"</td><td>"+$("#textLesson1").val()+'</td><td><a href="#">删除</a></td>');
                    $('.tbody1').append(tr);
                    $('.addPanel').hide();
                    $('.mask').hide();
                    tr.find("a").click(function () {
                        alert("确认删除该选项吗？");
                        tr.remove();
                    });
                    $("#textLesson").val("");
                    $("#textLesson1").val("");
                });

            });
=======
            }
        </style>
        <script>

>>>>>>> d039c0432e24598336d4dd637b563cca28130084
        </script>
    </head>
    <body>
     <div class="box">
         <div class="button"><span>添加数据</span></div>
         <table>
             <thead>
             <tr>
                 <th>课程名称</th>
                 <th>所属学院</th>
                 <th>学习情况</th>
             </tr>
             </thead>
<<<<<<< HEAD
             <tbody class="tbody1">
             <tr>
                 <td>English</td>
                 <td>外国语学院</td>
                 <td><a href="#">删除</a></td>
=======
             <tbody>
             <tr>
                 <td>English</td>
                 <td>外国语学院</td>
                 <td><a href="">Done</a></td>
>>>>>>> d039c0432e24598336d4dd637b563cca28130084
             </tr>
             <tr>
                 <td>Math</td>
                 <td>数理学院</td>
<<<<<<< HEAD
                 <td><a href="#">删除</a></td>
=======
                 <td><a href="">Done</a></td>
>>>>>>> d039c0432e24598336d4dd637b563cca28130084
             </tr>
             <tr>
                 <td>Physcal</td>
                 <td>物理学院</td>
<<<<<<< HEAD
                 <td><a href="#">删除</a></td>
=======
                 <td><a href="">Done</a></td>
>>>>>>> d039c0432e24598336d4dd637b563cca28130084
             </tr>
             <tr>
                 <td>Biology</td>
                 <td>生物学院</td>
<<<<<<< HEAD
                 <td><a href="#">删除</a></td>
=======
                 <td><a href="">Done</a></td>
>>>>>>> d039c0432e24598336d4dd637b563cca28130084
             </tr>
             </tbody>
         </table>
         <div class="mask"></div>
         <div class="addPanel">
              <div class="content-add">
                     <div class="header">
                         <span class="head1">填写数据</span>
                         <div class="head2">X</div>
                     </div>
<<<<<<< HEAD
                  <div class="mainContent">
                      <div class="content-name">
                      <label for="textLesson">课程名称：</label>
                      <input type="text" id="textLesson" placeholder="请输入课程名称">
                  </div>
                      <div class="content-depart">
                          <label for="textLesson">所属学院：</label>
                          <input type="text" id="textLesson1" placeholder="霍格沃茨魔法学校-leo">
                      </div>
                      <div class="button1">
                          <button >添加</button>
                      </div>
                  </div>
=======
                 <div class="content-name">
                     <label for="textLesson">课程名称：</label>
                     <input type="text" id="textLesson" placeholder="请输入课程名称">
                 </div>
>>>>>>> d039c0432e24598336d4dd637b563cca28130084
              </div>
         </div>
     </div>
    </body>
    </html>